<template>
    <div class="pagenation">
        <div>每页<input type="text" :value="pageSize" @input="iptChange">条， 共10条</div>
        
        <ul>
            <li @click="curPage(item)" :class="item === pageIndex? 'active': ''" v-for="(item, index) in pages" :key="index">{{item}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        pageIndex: Number,
        pageSize: Number
    },
    data() { 
        return {
            
        }
    },
    computed: {
        pages() {
            if(this.pageSize > 0) {
                let all = Math.ceil(10 / this.pageSize)
                let arr = []
                if(all >= 7) {
                    if(this.pageIndex <= 4) {
                        arr = [1, 2, 3, 4, 5, '...', all]
                    } else if(this.pageIndex >= all - 3){
                        arr = [1, '...', all - 4,all - 3,all - 2,all - 1,all]
                    } else {
                        arr = [1, '...', this.pageIndex -2, this.pageIndex -1, this.pageIndex, this.pageIndex + 1, this.pageIndex + 2, '...', all]
                    }
                } else {
                    for(let i = 0; i<all; i++) {
                        arr.push(i + 1)
                    }
                }
                return arr
            } else {
                alert('怎么能不是个数字呢,你是猪吗')
                return []
            }
            
        }
    },
    created() {

    },
    methods:{
        curPage(item) {
            if(item == '...') return
            this.$emit('update:pageIndex', item)
        },

        iptChange(e) {
            this.$emit('update:page-size', e.target.value*1)
            this.curPage(1)
        }
    },
}
</script>

<style scoped>
.pagenation {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    
}
li {
    width: 26px;
    height: 26px;
    border: 1px solid blue;
    color: #333;
    text-align: center;
    line-height: 26px;
}
li.active {
    background-color: skyblue;
}
input {
    width: 60px;
    height: 26px;
    border-radius: 5px;
}
</style>